<template>
    <div style="width: 100%;height: 1000px;margin: 20px auto">
        <!--试卷标题-->
        <div style="width:100%;text-align: center;font-size: 25px;margin-bottom: 24px">{{this.name}}</div>
        <!--题号选择框-->
        <div style="width: 20%;height: 760px;border: 2px solid #909399;float: left;margin: 5px">
            <div :data="paperExerciseList">
                <ol style="list-style: none;padding: 0;margin: 10px">
                    <li v-show="isshow1">单选题
                        <ul style="list-style: none;">
                            <li v-for="(item,index) in  choiceList"style="float: left">
                                <a @click="getexerciseid(item.exerciseInfo.id)"
                                   style="cursor: pointer;display: block;width: 15px;height: 15px;
                                        border: 1px solid black;text-align: center;font-weight: bold;margin: 2px">{{index+1}}
                                </a>
                            </li>
                        </ul>
                    </li>
                    <div style="clear: both"></div>
                    <li v-show="isshow2">多选题
                        <ul style="list-style: none;">
                            <li v-for="(item,index) in  manychoiceList" style="float: left">
                                <a @click="getexerciseid(item.exerciseInfo.id)"
                                   style="cursor: pointer;display: block;width: 15px;height: 15px;
                                        border: 1px solid black;text-align: center;font-weight: bold;margin: 2px">{{index+1}}
                                </a>
                            </li>
                        </ul>
                    </li>
                    <div style="clear: both"></div>
                    <li v-show="isshow3">判断题
                        <div style="clear: both"></div>
                        <ul style="list-style: none;">
                            <li v-for="(item,index) in  truefalseList" style="float: left">
                                <a @click="getexerciseid(item.exerciseInfo.id)"
                                        style="cursor: pointer;display: block;width: 15px;height: 15px;
                                        border: 1px solid black;text-align: center;font-weight: bold;margin: 2px">{{index+1}}
                                </a>
                            </li>
                        </ul>
                    </li>
                    <div style="clear: both"></div>
                    <li v-show="isshow4">填空题
                        <ul style="list-style: none;">
                            <li v-for="(item,index) in  completionList" style="float: left">
                                <a @click="getexerciseid(item.exerciseInfo.id)"
                                   style="cursor: pointer;display: block;width: 15px;height: 15px;
                                        border: 1px solid black;text-align: center;font-weight: bold;margin: 2px">{{index+1}}
                                </a>
                            </li>
                        </ul>
                    </li>
                    <div style="clear: both"></div>
                    <li v-show="isshow5">简答题
                        <ul style="list-style: none;">
                            <li v-for="(item,index) in  shortanswerList" style="float: left">
                                <a @click="getexerciseid(item.exerciseInfo.id)"
                                   style="cursor: pointer;display: block;width: 15px;height: 15px;
                                        border: 1px solid black;text-align: center;font-weight: bold;margin: 2px">{{index+1}}
                                </a>
                            </li>
                        </ul>
                    </li>
                    <div style="clear: both"></div>
                    <li v-show="isshow6">程序设计题
                        <ul style="list-style: none;">
                            <li v-for="(item,index) in  programmingList " style="float: left">
                                <a @click="getexerciseid(item.exerciseInfo.id)"
                                   style="cursor: pointer;display: block;width: 15px;height: 15px;
                                        border: 1px solid black;text-align: center;font-weight: bold;margin: 2px">{{index+1}}
                                </a>
                            </li>
                        </ul>
                    </li>
                </ol>
            </div>
        </div>
        <!--考试时间倒计时-->
        <div style="width: 75%;height: 100px;border: 2px solid #909399;float: left;margin: 5px">
            <el-progress :text-inside="true" :stroke-width="50" :percentage="100" color="#ff0" style="margin: 20px auto;width: 100%"></el-progress>
        </div>
        <!--考试题目显示-->
        <div style="width: 75%;height: 646px;border: 2px solid #909399;float: left;margin: 5px">
            <!--题目题干显示-->
            <div>
                <ul style="list-style: none;margin-top: 50px">
                    <li v-if="item.exerciseInfo.id==exerciseid" v-for="item in choiceList">
                        <span>{{ item.choice.content}}</span>
                    </li>
                </ul>
                <ul style="list-style: none;">
                    <li v-if="item.exerciseInfo.id==exerciseid" v-for="item in manychoiceList">
                        <span>{{ item.choice.content}}</span>
                    </li>
                </ul>
                <ul style="list-style: none;">
                    <li v-if="item.exerciseInfo.id==exerciseid" v-for="item in truefalseList">
                        <span>{{ item.trueFalse.content}}</span>
                    </li>
                </ul>
                <ul style="list-style: none;">
                    <li v-if="item.exerciseInfo.id==exerciseid" v-for="item in completionList">
                    <span>{{ item.completion.content}}</span>
                </li>
                </ul>
                <ul style="list-style: none;">
                    <li v-if="item.exerciseInfo.id==exerciseid" v-for="item in shortanswerList">
                        <span>{{ item.shortAnswer.content}}</span>
                    </li>
                </ul>
                <ul style="list-style: none;">
                <li v-if="item.exerciseInfo.id==exerciseid" v-for="item in programmingList">
                    <span>{{ item.programming.content}}</span>
                </li>
                </ul>
            </div>
            <!--作答区域-->
            <div style="margin-top: 24px;">
                <div v-if="item.exerciseInfo.id==exerciseid" v-for="item in choiceList">
                    <el-radio-group v-model="item.answer" text-color="#409EFF">
                        <el-radio label="A" style="margin-left: 40px;margin-top: 10px">A. {{item.choice.labela}}</el-radio><br/>
                        <el-radio label="B" style="margin-left: 40px;margin-top: 10px">B. {{item.choice.labelb}}</el-radio><br/>
                        <el-radio label="C" style="margin-left: 40px;margin-top: 10px">C. {{item.choice.labelc}}</el-radio><br/>
                        <el-radio label="D" style="margin-left: 40px;margin-top: 10px">D. {{item.choice.labeld}}</el-radio><br/>
                    </el-radio-group><br>
                    <el-button v-show="buttonshow" @click="getanswer(choiceanswer)" size="medium" type="danger" style="margin-left: 50%;margin-top: 24px;">保存</el-button>
                </div>
                <div v-if="item.exerciseInfo.id==exerciseid" v-for="item in manychoiceList">
                    <el-checkbox-group v-model="manychoiceanswer">
                        <el-checkbox label="A" style="margin-left: 40px;margin-top: 10px">A. {{item.choice.labela}}</el-checkbox><br/>
                        <el-checkbox label="B" style="margin-left: 40px;margin-top: 10px">B. {{item.choice.labelb}}</el-checkbox><br/>
                        <el-checkbox label="C" style="margin-left: 40px;margin-top: 10px">C. {{item.choice.labelc}}</el-checkbox><br/>
                        <el-checkbox label="D" style="margin-left: 40px;margin-top: 10px">D. {{item.choice.labeld}}</el-checkbox><br/>
                        <el-checkbox label="E" v-if="item.choice.labele ==null" style="margin-left: 40px;margin-top: 10px">E. {{item.choice.labele}}</el-checkbox><br/>
                        <el-checkbox label="F" v-if="item.choice.labele ==null" style="margin-left: 40px;margin-top: 10px">F. {{item.choice.labelf}}</el-checkbox><br/>
                    </el-checkbox-group><br>
                    <el-button v-show="buttonshow" @click="getanswer(manychoiceanswer)" size="medium" type="danger" style="margin-left: 50%;margin-top: 24px;">保存</el-button>
                </div>
                <div v-if="item.exerciseInfo.id==exerciseid" v-for="item in truefalseList">
                    <el-radio-group v-model="truefalseanswer" text-color="#409EFF">
                        <el-radio :label="1" style="margin-left: 40px;margin-top: 10px">对</el-radio><br/>
                        <el-radio :label="-1" style="margin-left: 40px;margin-top: 10px">错</el-radio><br/>
                    </el-radio-group><br>
                    <el-button v-show="buttonshow" @click="getanswer(truefalseanswer)" size="medium" type="danger" style="margin-left: 50%;margin-top: 24px;">保存</el-button>
                </div>
                <div v-if="item.exerciseInfo.id==exerciseid" v-for="item in completionList">
                    <div v-for="a in completionnum">
                        <span style="margin-left: 40px">第 {{a}} 空</span>
                    <el-input v-model="item.answerArray[a-1]" placeholder="请输入答案" style="margin-left: 40px;margin-top: 10px;max-width: 50%"></el-input><br>
                    </div>
                    <el-button v-show="buttonshow" @click="getcompletionanswer()" size="medium" type="danger" style="margin-left: 50%;margin-top: 24px;">保存</el-button>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name:"TakeExam",
        data(){
            return{
                user:{},
                studentid:'',
                id:'',
                name:'',
                isshow1:false,
                isshow2:false,
                isshow3:false,
                isshow4:false,
                isshow5:false,
                isshow6:false,
                buttonshow:false,
                //题目信息列表
                paperExerciseList:[],
                choiceList:[],
                manychoiceList:[],
                truefalseList:[],
                completionList:[],
                shortanswerList:[],
                programmingList:[],
                //题目ID
                exerciseid:'',
                //填空题答案数目
                completionnum:4,
                //题目答案记录
                choiceanswer:'',
                manychoiceanswer:[],
                truefalseanswer:'',
                // completionanswers:{
                completionanswer:[],
                // },
                examanswerdetail:{
                    answer:'',
                    answerrecord:{
                        id:'',
                        studentid:'',
                        examid:'',
                        exerciseinfoid:'',
                    },
                }
            }
        },
        methods:{
            getexerciseid(num){
                if(this.exerciseid==num){
                    this.exerciseid=num;
                    this.buttonshow=true;
                    this.getCompletionNum(num);
                }
                else{
                    this.exerciseid=num;
                    this.choiceanswer='';
                    this.manychoiceanswer=[];
                    this.truefalseanswer='';
                    this.completionanswer=[];
                    this.buttonshow=true;
                    this.getCompletionNum(num);
                }
            },
            getExampaperTypeInfo(){
                this.$http.post("/api/exam/findExerciseDetailByexamid/"+this.id).then((res)=>{
                    this.paperExerciseList=res.data.data;
                    for(let i=0;i<this.paperExerciseList.length;i++) {
                        if (this.paperExerciseList[i].exerciseInfo.type === 1) {
                            this.isshow1 = true;
                            this.choiceList.unshift(this.paperExerciseList[i]);
                        }
                        else if (this.paperExerciseList[i].exerciseInfo.type === 2) {
                            this.isshow2 = true;
                            this.manychoiceList.unshift(this.paperExerciseList[i]);
                        }
                        else if (this.paperExerciseList[i].exerciseInfo.type === 3) {
                            this.isshow3 = true;
                            this.truefalseList.unshift(this.paperExerciseList[i]);
                        }
                        else if (this.paperExerciseList[i].exerciseInfo.type === 4) {
                            this.isshow4 = true;
                            this.completionList.unshift(this.paperExerciseList[i]);
                        }
                        else if (this.paperExerciseList[i].exerciseInfo.type === 5) {
                            this.isshow5 = true;
                            this.shortanswerList.unshift(this.paperExerciseList[i]);
                        }
                        else if (this.paperExerciseList[i].exerciseInfo.type === 6) {
                            this.isshow6 = true;
                            this.programmingList.unshift(this.paperExerciseList[i]);
                        }
                    }
                }).catch((error)=>{
                    console.log(error);
                })
            },
            //获取学生ID
            getStudentInfo(){
                this.user = JSON.parse(localStorage.getItem("CurrentUser"));//获取userid
                this.$http.get('/api/studentinfo/findByUserid/'+this.user.id).then(res=>{
                    this.studentid=res.data.data.id;
                }).catch((error)=>{
                    console.log(error);
                });
            },
            //保存题目答案
            getcompletionanswer(){
                console.log(this./*completionanswers.*/completionanswer.length);
                console.log(this.completionanswer);
            },
            getanswer(string){
                this.examanswerdetail.answer=string;
                this.examanswerdetail.answerrecord.studentid=this.studentid;
                this.examanswerdetail.answerrecord.examid=this.id;
                this.examanswerdetail.answerrecord.exerciseinfoid=this.exerciseid;
                this.$http.post('/api/examanswerrecordcontroller/AddorModifyExerciserecord',this.examanswerdetail).then(res=>{
                    this.$message({
                        message: '答案保存成功',
                        type: 'success',
                    });
                }).catch((error)=>{
                    console.log(error);
                })
            },
            //填空题答案数目
            getCompletionNum(num){
                this.completionnum=0;
                this.$http.get('/api/examanswerrecordcontroller/FindNumbyid/'+num).then(res=>{
                    this.completionnum=res.data.data;
                }).catch((error)=>{
                    console.log(error);
                })
            },
        },
        mounted(){
            this.getStudentInfo();
            this.id = this.$route.query.id;
            this.name=this.$route.query.name;
            this.getExampaperTypeInfo();
        }
    }
</script>

<style scoped>

</style>